<template>
<!-- 下载器数据分析-展现数据分析 -->
<div class="block" v-loading="loading" element-loading-text="拼命加载中">
    <header-components @getMsg="getMsg" :baseExcelURL="baseExcelURL" :headerConfig="headerConfig"></header-components>
    <chart-modal :chartkey="chartOptionKeys.chart01" style="margin-top:10px;" v-bind:option="chartoptions.dataall" :chartConfig="chartConfig"></chart-modal>
    <div class="tableBorder">
        <el-table id="DataTable" :data="tableDataPV" border style="width: 50%;margin:10px 0px 10px 0px;">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="showNum" label="展现数"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
import HeaderComponents from './header/HeaderComponents';
import ChartModal from './ChartModal.vue';

import {
    setdataAll01,
    getMax
} from '../config/setChart.js';
import {
    getChartConfig
} from '../config/toolsui.config.js';

export default {
    data() {
        let showDate = new Date();
        let seperator1 = '-';
        let year = showDate.getFullYear();
        let month = showDate.getMonth() + 1;
        let day = showDate.getDate();
        var strDate = showDate.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        return {
            baseExcelURL: '' + this.$store.state.domain + '/bzDCP/emerge/exportShowExcel',
            getDataByConditionURL: '' + this.$store.state.domain + '/bzDCP/emerge/getDataByCondition',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableDataPV: [],
            headerData: '',
            headerConfig: {},
            chartoptions: {
                dataall: {},
            },
            chartConfig: getChartConfig('100%', '500px'),
            chartOptionKeys: {
                chart01: 'chart01'
            },
            loading: true
        };
    },
    components: {
        ChartModal,
        HeaderComponents
    },
    created() {
        this.initDataAll();
    },
    methods: {
        getMsg(data) {
            this.headerData = data;
            this.search();
        },
        getDataSearch(response) {
            this.tableDataPV = response.data.result;
            this.total = response.data.total;
            var legends = [];
            var datas = [];
            for (var i = 0; i < response.data.result.length; i++) {
                legends[i] = response.data.result[i].date;
                datas[i] = response.data.result[i].showNum;
            }
            var setMaxs = getMax([datas]);
            this.$store.state.chartOption['chart01'] = setdataAll01(legends.reverse(), [{
                name: '展现数',
                type: 'bar',
                data: datas.reverse(),
                max: setMaxs
            }, ]);
        },
        getData() {
            this.loading = false;
            this.$ajax.post(this.getDataByConditionURL, this.qs.stringify({
                starttime: this.starttime,
                endtime: this.endtime,
            })).then(response => {
                this.getDataSearch(response);
            });
        },
        search() {
            let _this = this.headerData;
            if (_this.starttime == null || _this.endtime == null) {
                this.$message.warning('查询条件不能为空！');
                return;
            } else if (_this.starttime > _this.endtime) {
                this.$message.warning('开始时间不能大于结束时间！');
                return;
            } else {
                this.loading = true;
                this.currentPage = 1;
                this.$ajax.post(this.getDataByConditionURL,
                        this.qs.stringify({
                            starttime: _this.starttime,
                            endtime: _this.endtime,
                            appType: _this.appType,
                            appid: _this.appid,
                            channelType: _this.channelType,
                            browser: _this.browser,
                            area: _this.area,
                            prov: _this.prov,
                            winnt: _this.winnt,
                            wow: _this.wow,
                            resource: _this.resource,
                            soft: _this.soft,
                            radio: _this.radio,
                            currentPage: 1,
                            pageSize: this.pageSize
                        }, {
                            indices: false
                        })
                    )
                    .then(response => {
                        if (response.status == 200) {
                            this.getDataSearch(response);
                        } else {
                            this.$message.warning("网络错误！");
                            return;
                        }
                        this.loading = false
                    })
                    .catch(function (error) {
                        console.log(error);
                        this.loading = true;
                    });
            }
        },

        initDataAll() {
            this.$store.state.chartOption = {
                chart01: {},
            };
            this.getData();
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getDataByConditionURL,
                    this.qs.stringify({
                        starttime: _this.starttime,
                        endtime: _this.endtime,
                        appType: _this.appType,
                        appid: _this.appid,
                        channelType: _this.channelType,
                        browser: _this.browser,
                        area: _this.area,
                        prov: _this.prov,
                        winnt: _this.winnt,
                        wow: _this.wow,
                        resource: _this.resource,
                        soft: _this.soft,
                        radio: _this.radio,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response);
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        },
        handleSizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getDataByConditionURL,
                    this.qs.stringify({
                        starttime: _this.starttime,
                        endtime: _this.endtime,
                        appType: _this.appType,
                        appid: _this.appid,
                        channelType: _this.channelType,
                        browser: _this.browser,
                        area: _this.area,
                        prov: _this.prov,
                        winnt: _this.winnt,
                        wow: _this.wow,
                        resource: _this.resource,
                        soft: _this.soft,
                        radio: _this.radio,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response);
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        }
    },
};
</script>

<style scoped>

</style>
